<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>配置项dataset-数据集-映射</title>
  <script src="./echarts.js"></script>
  <style lang="css">
    #chart1,#chart2 {
      width: 100%;
      height: 650px;
      /* border: 1px solid red; */
      float: left;
    }
  </style>
</head>

<body>
  <div id="chart1"></div>
  <div id="chart2"></div>

  <script>
    const myChart1 = echarts.init(document.getElementById('chart1'));
    /*
      1、数据到系列的映射，这个是由维度是行还是列来决定的，通过seriesLayoutBy属性来设置，
      2、数据到图形的映射，这个是由哪个维度来决定的，通过encode来设置

      可以把任意一个维度的数据映射到图表上任意一个需要数据的地方
    */

    myChart1.setOption({
      legend: {},
      tooltip: {},
      xAxis: [
        { type: 'category', gridIndex: 0 },
        { type: 'category', gridIndex: 1 },
      ],
      yAxis: [
        { gridIndex: 0 },
        { gridIndex: 1 },
      ],
      grid: [
        { bottom: '55%' },
        { top: '55%' },
      ],
      dataset: {
        source: [
          // 第一行是维度名称, 维度名称(从第二个开始)会被解析为系列名称
          // 第一列(从第二个开始)会被解析成x轴的类目名称
          ['product', '2014', '2015', '2016'],
          ['iphone4', 89.3, 92.1, 94.4],
          ['iphone5', 95.8, 89.4, 91.2],
          ['iphone6', 97.7, 83.1, 92.5],
          ['iphone7', 99.9, 86.4, 94.1],
        ],
      },
      series: [
        // 维度为行
        {
          type: 'bar',
          seriesLayoutBy: 'row', // 默认是column，解释如下
          // 第一行是维度名称, 维度名称(从第二个开始)会被解析为系列名称
          // 第一列(从第二个开始)会被解析成x轴的类目名称
          // 而值为row时解释如下
          // 一列是一个维度：第一列是维度名称，数据从第二个开始维度名称会被解析为系列名称，第一行会被解析成x轴的类目名称
        },
        { type: 'bar', seriesLayoutBy: 'row' },
        { type: 'bar', seriesLayoutBy: 'row' },

        // 维度为列
        { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
        { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
        { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
      ]
    })


    const myChart2 = echarts.init(document.getElementById('chart2'));
    myChart2.setOption({
      dataset: {
        source: [
          ['score', 'amount', 'product'],
          [89.3, 58212, 'Matcha Latte'],
          [57.1, 78254, 'Milk Tea'],
          [74.4, 41032, 'Cheese Cocoa'],
          [50.1, 12755, 'Cheese Brownie'],
          [89.7, 20145, 'Matcha Cocoa'],
          [68.1, 79146, 'Tea'],
          [19.6, 91852, 'Orange Juice'],
          [10.6, 101852, 'Lemon Juice'],
          [32.7, 20112, 'Walnut Brownie']
        ]
      },
      legend: {},
      grid: { containLabel: true },
      xAxis: { name: 'amount' },
      yAxis: { type: 'category' },
      visualMap: {
        orient: 'horizontal',
        left: 'center',
        min: 10,
        max: 100,
        text: ['high score', 'low score'],
        dimension: 0,
        inRange: {
          color: ['#DE2A4D', '#FCCE10']
        }
      },
      series: [
        {
          type: 'bar',
          encode: {
            // 把amount列映射到x轴，product列映射到y轴.
            x: 'amount',
            y: 'product'
          }
        }
      ]
    })

  </script>
</body>

</html>